<template>
<div>
    <div class = "goods-list">
      <router-link :to="'/home/Goodsinfo'+item.id" class = "goods-item" v-for="item in goodslist" :key="item.id" >
          <img :src="item.thumb_path">
          <span class="title">{{item.title}}</span>
          <div class = "info">
              <p class = "price">
                <span class = "now">￥{{item.sell_price}}</span>
                <span class = "old">￥{{item.market_price}}</span>
              </p>
              <p class = "sell">
                <span>热卖中</span>
                <span>剩{{item.stock_quantity}}件</span>
              </p>
           </div>
      </router-link>   
  </div>
</div>
  
</template>

<script>
export default {
  name: 'Goods',
  data(){
    return{
      pageindex:1,
      goodslist:[]
    }
  },
  created(){
    this.getgoods()
  },
  methods:{
    getgoods(){
      this.$axios({
        method:"get",
        url:"http://www.liulongbin.top:3005/api/getgoods?pageindex="+this.pageindex
      }).then((res)=>{
        console.log(res)
        this.goodslist = res.data.message
      })
    }
  }
}
</script>

<style scoped>

.goods-list{
  background-color: #fff;
  padding: .12rem;
  display:flex;
  flex-wrap: wrap;
  justify-content: space-between;
  /* 换行 */

}
.title {
  font-size: .28rem;
}
.now{
  color: red;
}
.old{
  text-decoration: line-through;
}
.goods-item{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0 .1rem;
  border: 1px solid #ccc;
  width: 49%;
  box-shadow: 0 0 8px #ccc;
  margin-bottom: 6px;
}
.goods-item img{
  width: 100%;
}
.info{
  background-color: yellow;
}
</style>
